<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="600px" v-if="visible" append-to-body
      :close-on-click-modal="false" @close="closeDialog">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" :label-width="labelWidth" :disabled="disabled"
        v-loading="loading">
        <el-form-item label="资产类型:" prop="assetType">
          <el-select filterable v-model="ruleForm.assetType" placeholder="请选择" :style="{width: inputWidth}"  @change="handleassetType">
            <el-option v-for="item in assetTypeLs" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请发放账户:" prop="platformWalletType">
          <el-select filterable v-model="ruleForm.platformWalletType" placeholder="请选择" :style="{width: inputWidth}">
            <el-option v-for="item in platformWalletTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请目的:" prop="goal">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="ruleForm.goal" maxlength="300"
            show-word-limit placeholder="填写申请目的（详细描述）" :style="{width: inputWidth}"></el-input>
        </el-form-item>
        <el-form-item label="申请数量:" prop="applyAmount" required>
          <el-input v-model="ruleForm.applyAmount" maxlength="20" placeholder="请输入申请数量" :style="{width: inputWidth}">
          </el-input>
        </el-form-item>
        <el-form-item label="计划发放时间：" prop="issueTime">
          <el-date-picker v-model="ruleForm.issueTime" placeholder="请选择" type="datetime" format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm" :style="{width: inputWidth}">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请人:" prop="name">
          <span>{{userName}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="sumitLoading">申 请</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    addPlatformAsset,
  } from "@/api/integralOperation";
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: "Dialog",
    data() {
      var checkNum = (rule, value, callback) => {
        let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
        if (regNumber.test(value) == false || value == '0.00' || value == '0.0') {
          return callback(new Error('请填写大于0且最多保留两位小数的数值'));
        } else {
          return callback()
        }
      };
      return {
        labelWidth: '120px',
        inputWidth: '300px',
        sumitLoading: false,
        loading: false,
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "申请积分运营",
        // 是否显示弹出层
        visible: false,
        assetTypeLs: [], //发放积分类型下拉
        platformWalletTypeLs: [], //发放账户下拉
        platformWalletTypeLsNew: [],
        platformWalletTypeList:[],
        // 表单参数
        ruleForm: {
          applyAmount: '', //申请数量
          assetType: '', //	资产类型 platform_apply_asset_type
          goal: '', //申请目的
          issueTime: '', //计划发放时间 yyyy-MM-dd
          platformWalletType: '', //申请发放账户 platform_coco_wallet_type
        },
        // 表单校验
        rules: {
          assetType: [{
            required: true,
            message: "请选择资产类型",
            trigger: 'change',
          }],
          platformWalletType: [{
            required: true,
            message: "请选择申请发放账户",
            trigger: 'change',
          }],
          goal: [{
            required: true,
            message: "请输入申请目的",
            trigger: ['blur', 'change'],
          }],
          applyAmount: [{
            // required: true,
            // message: "请输入申请数量",
            validator: checkNum,
            trigger: ['blur', 'change'],
          }],
          issueTime: [{
            required: true,
            message: "请选择计划发放时间",
            trigger: 'change',
          }],
        }
      };
    },
    computed: {
      ...mapGetters([
        'userName',
      ])
    },
    created() {

    },
    methods: {
      handleassetType(e){
        console.log('e',e)
        if(e == 1){
          this.platformWalletTypeList = this.platformWalletTypeLs 
        }else if(e == 2){
          this.platformWalletTypeList = this.platformWalletTypeLsNew
        }
        console.log('e',this.platformWalletTypeList)

      },
      /** 弹框 */
      open(id) {
        this.getAssetType();
        this.getPlatformWalletType();
        this.visible = true
      },
      //获取发放积分类型字典
      getAssetType() {
        var dictType = "platform_apply_asset_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.assetTypeLs = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //获取申请发放账户字典
      getPlatformWalletType() {
        var dictType = "platform_coco_wallet_type,platform_tf_wallet_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.platformWalletTypeLs = res.result[0].dictList;
            this.platformWalletTypeLsNew = res.result[1].dictList
          })
          .finally(() => {
            this.loading = false;
          });
      },
      inputClick() { //修复input无法输入问题
        this.$forceUpdate()
      },
      /** 重置表单 */
      reset() {
        console.log('取消')
        this.$refs['ruleForm'].resetFields()
        this.ruleForm = {
          applyAmount: '', //申请数量
          assetType: '', //	资产类型 platform_apply_asset_type
          goal: '', //申请目的
          issueTime: '', //计划发放时间 yyyy-MM-dd
          platformWalletType: '', //申请发放账户 platform_coco_wallet_type
        }
      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset()
      },
      closeDialog() { //关闭弹窗
        this.reset()
      },
      /** 提交按钮 */
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.sumitLoading = true
            addPlatformAsset(this.ruleForm).then(response => {
              this.$message.success('申请成功');
              this.cancel();
              this.$emit('refresh')
              this.sumitLoading = false
            }).catch(() => {
              this.sumitLoading = false
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  };

</script>
<style scoped>
  .from_box {
    margin: 20px 0 0;
  }

  .shop_name {
    font-weight: bold;
    font-size: 16px;
    color: #1890FF;
    margin-bottom: 30px;
  }

  .input_box {
    margin: 0 10px;
  }

  .el_radio_box {
    display: flex;
    flex-direction: column;
  }

  .el_radio_box .el-radio {
    margin-top: 12px;
  }

</style>
